<template>
  <div id="mutiple-query-table-con">
    <g-banner :title="'多条件查询列表'" :des="'查询条件较多的列表'"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title">多条件查询列表</h2>
      </div>
    </a-affix>
    <div class="g-box">
      <el-form label-width="100px" class="g-multi-query pull-left">
        <el-form-item label="事项名称">
          <el-input placeholder="请输入事项名称" class="g-input-width"></el-input>
        </el-form-item>
        <el-form-item label="受理号">
          <el-input placeholder="请输入受理号" class="g-input-width"></el-input>
        </el-form-item>
        <template v-if="!queryMode">
          <el-form-item label="受理时间">
            <el-date-picker placeholder="请输入受理时间" type="date" class="g-input-width"></el-date-picker>
          </el-form-item>
          <el-form-item label="办结时间">
            <el-date-picker placeholder="请输入办结时间" type="date" class="g-input-width"></el-date-picker>
          </el-form-item>
          <el-form-item label="审批状态">
            <el-select placeholder="请输入审批状态" v-model="advancedQuery.status" class="g-input-width">
              <el-option value="0" label="审批中"></el-option>
              <el-option value="1" label="审批成功"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属区域">
            <el-select placeholder="请输入所属区域" v-model="advancedQuery.region" class="g-input-width">
              <el-option value="0" label="选项一"></el-option>
              <el-option value="1" label="选项二"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主体业态">
            <el-input placeholder="请输入主体业态" class="g-input-width"></el-input>
          </el-form-item>
          <el-form-item label="经营项目">
            <el-input placeholder="请输入经营项目" class="g-input-width"></el-input>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
      <div class="pull-left">
        <el-button slot="reference" type="text" v-if="queryMode" @click="queryMode = false"><i class="el-icon-caret-bottom"></i>更多查询条件</el-button>
        <el-button slot="reference" type="text" v-else @click="queryMode = true"><i class="el-icon-caret-top"></i>收起查询条件</el-button>
      </div>
      <div class="clearfix"></div>
      <div class="line"></div>
      <el-button type="primary" @click="handleNew" class="pull-right">新增</el-button>
      <div class="clearfix"></div>
      <el-table :data="cosumerData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center" v-if="columnVisible[0]"></el-table-column>
        <el-table-column label="消费者名称" header-align="center" width="220px" v-if="columnVisible[1]">
          <div slot-scope="scope" class="consumer-name">
            <img src="@/assets/img/icon-consumer.png">
            <el-button type="text" @click="handleDetail(scope.row)">{{scope.row.consumerName}}</el-button>
          </div>
        </el-table-column>
        <el-table-column label="消费者编码" prop="consumerNameCode" align="center" v-if="columnVisible[2]"></el-table-column>
        <el-table-column label="调用次数" prop="invoke" align="center" v-if="columnVisible[3]"></el-table-column>
        <el-table-column label="状态" header-align="center" width="100px" v-if="columnVisible[4]">
          <div slot-scope="scope">
            <div v-if="scope.row.status == 1">
              <div class="dot dot-green"></div>
              <span>已发布</span>
            </div>
            <div v-if="scope.row.status == 0">
              <div class="dot dot-orange"></div>
              <span>草稿</span>
            </div>
          </div>
        </el-table-column>
        <el-table-column label="是否启用" align="center" v-if="columnVisible[5]">
          <div slot-scope="scope">
            <el-switch v-model="cosumerData[scope.$index].isEnable" @change="handleEnable(scope.row)"></el-switch>
          </div>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <div slot-scope="{row}" class="g-operation-column">
            <el-button type="text" @click="handleEdit(row)">修改</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
            <el-button type="text">更多</el-button>
          </div>
        </el-table-column>
        <el-table-column width="50" align="right">
          <div slot="header" class="g-more-column">
            <el-dropdown trigger="click" :hide-on-click="false">
              <i class="el-icon-more"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[0]">序号</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[1]">消费者名称</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[4]">状态</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination class="pull-right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[5, 10, 25]" background :page-size="pageSize" :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper" :hide-on-single-page="false" :total="total">
    </el-pagination>
    <div class="clearfix"></div>
    <!-- 新增修改对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="handlerDialogVisible" width="30%" :before-close="handleHandlerClose" class="g-dialog">
      <consumer-handler ref="consumerHandler" @load="load"></consumer-handler>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleHandlerClose">取消</el-button>
        <el-button @click="handleSubmit" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <!-- 详情对话框 -->
    <el-dialog title="详情" :visible.sync="detailDialogVisible" width="40%" :before-close="handleDetailClose" class="g-dialog">
      <consumer-detail ref="consumerDetail"></consumer-detail>
    </el-dialog>
  </div>
</template>
<script>
import { getNormalTableData } from '@/api/normal-table'
import { getScrollingCon } from '@/util/common'
import ConsumerHandler from './components/consumer-handler'
import ConsumerDetail from './components/consumer-detail'
export default {
  data() {
    return {
      search: '',
      advancedQuery: {
        status: null,
        region: null,
      },
      queryMode: true,

      // 【表格】
      columnVisible: [true, true, true, true, true, true],
      cosumerData: [],
      currentPage: 1,
      pageSize: 10,
      total: 100,
      
      // 【对话框】
      handlerDialogVisible: false,
      dialogTitle: '新增',

      // 【对话框】
      detailDialogVisible: false,
    }
  },
  created() {
    this.loadNormalTableData()
  },
  components: {
    ConsumerHandler, ConsumerDetail
  },
  methods: {
    getScrollingCon,
    loadNormalTableData() {
      getNormalTableData().then((result) => {
        this.cosumerData = result.data.list
      })
    },
    handleAdvancedQuery() {
      this.$refs.queryPopover.doClose()
      this.queryMode = true
    },
    handleDetail(consumerId) {

    },
    handleEnable(row) {

    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    },
    // 点击新增按钮
    handleNew() {
      this.handlerDialogVisible = true
      this.dialogTitle = '新增'
      this.$nextTick(() => {
        this.$refs.consumerHandler.init('add')
      })
    },
    // 点击名称查看详情
    handleDetail(row) {
      this.detailDialogVisible = true
      this.$nextTick(() => {
        this.$refs.consumerDetail.load(row)
      })
    },
    // 删除
    handleDelete({consumerId}) {
      this.$confirm('即将删除一条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    // 点击修改按钮
    handleEdit(row) {
      this.handlerDialogVisible = true
      this.dialogTitle = '修改'
      this.$nextTick(() => {
        this.$refs.consumerHandler.init('edit', row)
      })
    },
    // 点击提交（新增或修改）按钮
    handleSubmit() {
      this.$refs.consumerHandler.handleSubmit()
    },
    // 关闭消费者对话框
    handleHandlerClose() {
      this.handlerDialogVisible = false
    },
    // 对话框内提交成功
    load() {
      this.loadNormalTableData()
      this.handleHandlerClose()
    },
    // 关闭详情对话框
    handleDetailClose() {
      this.detailDialogVisible = false
    },
  },
}
</script>
<style lang="scss" scoped>
.button-group {
  margin-left: 114px;
}
.consumer-name {
  img, /deep/ .el-button {
    vertical-align: middle;
  }
  /deep/ .el-button {
    margin-left: 10px;
  }
}
.dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  &.dot-green {
    background-color: #00cb99;
    box-shadow: 0 0 10px #00cb99;
  }
  &.dot-orange {
    background-color: #ffac00;
    box-shadow: 0 0 10px #ffac00;
  }
  &+span {
    vertical-align: middle;
  }
}
.g-input-width {
  width: 80%;
}
.g-line {
  border-bottom: 1px dashed #ccd1d8;
  margin-bottom: 20px;
}
</style>